<template>
  <div class="content">
    <h3 class="user-title">{{'RECHARGE'|t}}</h3>
    <div class="wechat-code">
      <canvas ref="cvs" height="20rem" width="20rem" id="canvas"></canvas>
    </div>
    <div class="recharge-address">
      <zx-form-group :title="$t('RECHARGE_ADDRESS')">
        <input type="text" disabled class="address-input" v-model="inputValue">
      </zx-form-group>
      <div class="recharge-button">
        <zx-button size="min" class="copy-btn" type="info" v-clipboard:copy="inputValue" v-clipboard:success="onCopy" v-clipboard:error="onError">{{'COPY'|t}}</zx-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { Asset } from '@/services';
  import QRCode from 'qrcode';
  export default {
    data() {
      return {
        values: 11,
        inputValue: ''
      };
    },
    methods: {
      async getData() {
        try {
          let res = await Asset.GoFicRecharge({
            userNo: Auth.getItem('userId'),
            coinType: this.$route.query.coinType,
            token: Auth.getItem('token')
          });
          this.inputValue = res.data;
          this.QRCodeCanvas(this.inputValue);
        } catch (error) {
          this.inputValue = error;
          this.QRCodeCanvas(error);
          console.log(error);
        }
      },
      onCopy(e) {
        Form.Totas('COPY_SUCCESS');
      },
      onError(e) {
        alert('Failed to copy texts');
      },
      QRCodeCanvas(value) {
        QRCode.toCanvas(this.$refs.cvs, value, (error) => {
          if (error) {
            console.log(error);
          } else {
            console.log('success!');
          }
        });
      }
    },
    mounted() {
      this.getData();
    }
  };
</script>
<style lang="scss" scoped>
  #canvas {
    height: 18rem !important;
    width: 18rem !important;
  }

  .recharge-button {
    text-align: right;
    padding: 1rem;
  }

  .copy-btn {
    padding: 0.5rem 1.5rem;
    color: RGBA(1, 157, 250, 1);
    font-size: 1.2rem;
    line-height: inherit;
  }

  @import "../../assets/sass/asset.scss";
</style>